@import "../../styles/colors.less";

.cm-messages-wrap{
    position: fixed;
    left: 50%;
    top: 8%;
    transform: translate(-50%, 0);
}
.cm-message{
    // visibility: hidden;
    // z-index: -999;
    margin-top: 10px;
    text-align: center;
    transform: translate(0, -500px);
    animation: dropup 0.3s linear;
}

@keyframes dropdown {
    0% {
        transform: translate(0, -500px);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes dropup {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -500px);   
    }
}

.cm-message-visible{
    // visibility: visible;
    // z-index: 6000;
    animation: dropdown 0.3s linear;
    transform: translate(0, 0);
}
.cm-message-inner{
    flex-direction: column;
    background-color: #fff;
    padding: 8px 16px;
    display: inline-block;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.cm-message-close{
    display: inline-block;
    cursor: pointer;
    margin-left: 8px;
    &:hover{
        color: @color-blue-light;
    }
}

.cm-message-content{
    display: inline-block;
}
.cm-message-icon{
    margin-right: 4px;
    color: @color-blue;
    font-size: 16px;
    vertical-align: middle;
}

.cm-message-info{
    &.cm-message-background{
        .cm-message-inner{
            background-color: lighten(@color-blue, 40%);
        }
        .cm-message-content{
            color: @color-blue;
        }
    }
}
.cm-message-success{
    .cm-message-icon{
        color: @color-success;
    }
    &.cm-message-background{
        .cm-message-inner{
            background-color: lighten(@color-success, 52%);
        }
        .cm-message-content{
            color: @color-success;
        }
    }
}
.cm-message-warning{
    .cm-message-icon{
        color: @color-warning;
    }
    &.cm-message-background{
        .cm-message-inner{
            background-color: lighten(@color-warning, 48%);
        }
        .cm-message-content{
            color: @color-warning;
        }
    }
}
.cm-message-error{
    .cm-message-icon{
        color: @color-danger;
    }
    &.cm-message-background{
        .cm-message-inner{
            background-color: lighten(@color-danger, 48%);
        }
        .cm-message-content{
            color: @color-danger;
        }
    }
}

.cm-message-loading{
    margin-right: 4px;
    display: inline;
    vertical-align: middle;
    svg {
        color: @color-blue;
        display: inline;
        vertical-align: middle;
        margin-top: -3px;
    }
}